<template>
    <div>
		<el-row style="margin-bottom:20px">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :lg="6">
					<info_label
						id="release0"
						:type="common.titles[26]"
						:title="common.titles[25]"
						:num="String(labelsData.version_release)"
						:sub="common.subs[0]"
						:to_sub="common.to_sub"
						:cls="common.success"
					></info_label>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="6">
					<info_label
						id="release1"
						:type="common.titles[1]"
						:title="common.titles[14]"
						:num="String(labelsData.daily_version_release)"
						:sub="common.subs[0]"
						:to_sub="common.to_sub"
						:cls="common.success"
					></info_label>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="6">
					<info_label
						id="release2"
						:type="common.titles[18]"
						:title="common.titles[14]"
						:num="String(labelsData.release_version_release)"
						:sub="common.subs[0]"
						:to_sub="common.to_sub"
						:cls="common.success"
					></info_label>
				</el-col>
			</el-row>			
		</el-row>
		<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<span>版本发布趋势</span>
			</div>
			<div>
				<ve-line
					:data="releaseChartData"
					:settings="releaseChartSettings"
					:data-empty="dataEmpty"
					:data-zoom="dataZoom"
				></ve-line>
			</div>
		</el-card>
		<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
            <div slot="header" class="clearfix">
				<span>日统计汇总</span>
			</div>
			<div>
				<el-table
				:data="currentData"
				border
				style="width: 100%; margin-bottom: 20px"
				@sort-change="sortChange">
					<el-table-column prop="update_date" label="日期" :sortable="'custom'"></el-table-column>
					<el-table-column prop="version_release" label="发布" sortable></el-table-column>
					<el-table-column prop="daily_version_release" label="Daily发布" sortable></el-table-column>
					<el-table-column prop="release_version_release" label="Release发布" sortable></el-table-column>
					<el-table-column label="详情" width="120px">
						<template slot-scope="scope">
							<el-button
							type="primary"
							plain
							@click="viewDetail(scope.$index, scope.row)"
							size="medium">查看详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 15, 50, 100]"
				:page-size="currentSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="dataCount"></el-pagination>
			</div>
		</el-card>
    </div>
</template>

<script>
import { pagingData } from './utils.js';
import info_label from '@/components/devops/info_label.vue';
import common from '@/components/devops/get_data';
import { getHeader } from '@/app.config';
import 'v-charts/lib/style.css';
import 'echarts/lib/component/dataZoom';
export default {
    name: 'ProjectRelease',
    data () {
        this.dataZoom = [{
			type: 'slider',
			start: 0,
			end: 100
		}];
        return {
            common,
            labelsData: {},
            currentPage: 1,
			currentSize: 10,
            currentData: [],
            tableData: [],
            dataCount: 0,
            dataEmpty: true,
            releaseChartData: {
				columns: [
					'update_date',
					'version_release',
					'daily_version_release',
					'release_version_release'
				],
				rows: []
			},
			releaseChartSettings: {
				labelMap: {
					version_release: 'Total',
					daily_version_release: 'Daily-build',
					release_version_release: 'Release-build'
				}
			}
        }
    },
	components: {
		info_label,
    },
    props: {
        params: Object
    },
    methods: {
        init_datas: function(projectId, date) {
			this.get_daily_summary(projectId, date);
			this.get_label_data(projectId, date);
        },
        get_label_data(projectId, dates) {
			var self = this;
			this.$axios.get(
                process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/project/summary?page=release&projectId=' +
				projectId + '&date=' + dates, {headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							self.refreshing_project_kanban = false;
							var data = response.data.data;
							self.labelsData = data;
						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		},
		get_daily_summary(projectId, dates) {
			this.currentData = [];
			this.tableData = [];
			this.dataEmpty = true;
			var self = this;
			this.$axios.get(
                process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/project/table/summary?projectId=' +
                projectId + '&date=' + dates + '&page=release',
			    {headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							for (var i = 0; i < data.length; i++) {
								var tableDict = {
									update_date: data[i]['update_date'],
									build: data[i]['build'] + '次',
									version_release: data[i]['version_release'] + '次',
									daily_version_release:
										data[i]['daily_version_release'] + '次',
									release_version_release:
										data[i]['release_version_release'] + '次'
								};
								self.tableData.push(tableDict);
							}
							self.dataCount = self.tableData.length;
							self.currentPage = 1;
							self.currentSize = 10;
							self.dataEmpty = false;
							if (self.dataCount === 0) {
								self.currentData = [];
								self.dataEmpty = true;
							} else {
								self.currentData = pagingData(self.tableData, self.dataCount, self.currentPage, self.currentSize)
							}
							self.releaseChartData.rows = data.reverse();
						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		},
		sortChange: function(val) {
			var key = val['prop'];
			var compare1 = function(obj1, obj2) {
				var val1 = obj1[key];
				var val2 = obj2[key];
				if (val1 < val2) {
					return -1;
				} else if (val1 > val2) {
					return 1;
				} else {
					return 0;
				}
			};
			var compare2 = function(obj1, obj2) {
				var val1 = obj1[key];
				var val2 = obj2[key];
				if (val1 < val2) {
					return 1;
				} else if (val1 > val2) {
					return -1;
				} else {
					return 0;
				}
			};
			var arr = this.tableData;
			if (val['order'] === 'ascending') {
				this.currentData = pagingData(arr.sort(compare1), this.dataCount, this.currentPage, this.currentSize);
			} else if (val['order'] === 'descending') {
				this.currentData = pagingData(arr.sort(compare2), this.dataCount, this.currentPage, this.currentSize);
			} else {
				key = 'update_date';
				this.currentData = pagingData(arr.sort(compare2), this.dataCount, this.currentPage, this.currentSize);
			}
		},
		handleSizeChange: function(size) {
			this.currentSize = size;
			this.currentData = pagingData(this.tableData, this.dataCount, this.currentPage, this.currentSize)
		},
		handleCurrentChange: function(page) {
			this.currentPage = page;
			this.currentData = pagingData(this.tableData, this.dataCount, this.currentPage, this.currentSize)
		},
		viewDetail(index, row) {
			let routeData = this.$router.resolve({
				path:
					'/project/details/' +
					this.params.projectId + '/' +
					this.params.projectName +
					'_@_' +
					row.update_date +
					'_@_release'
			});
			window.open(routeData.href, '_blank');
		},
    },
    watch: {
        params: {
			handler: function(val) {
                const projectId = val.projectId === 'undefined' ? '' : val.projectId;
                const dates = val.time === 'undefined' ? '' : val.time;
				this.init_datas(projectId, dates);
			},
			deep: true
		}
    },
    mounted() {
        const projectId = this.params.projectId === 'undefined' ? '' : this.params.projectId;
        const dates = this.params.time === 'undefined' ? '' : this.params.time;
		this.init_datas(projectId, dates);
	}
}
</script>
